<script setup lang="ts">
interface Props {
  currentView: any
}
defineProps<Props>()
</script>

<template>
  <!-- <h1 class="title">
    <span>C</span><span>S</span><span>S</span> challenges
    <ToggleButton class="toggle-btn" />
  </h1> -->
  <div class="container">
    <nav>
      <a href="#/challenges/VerticalMenuWithSubMenu">Vertical Menu With SubMenu</a>
      <a href="#/challenges/AlignContent">Flex Box</a>
      <a href="#/challenges/ClipPathBasic">Clip Path Basic</a>
      <a href="#/challenges/DarkAndLightMode">Dark Mode</a>
      <a href="#/challenges/OuterHTMLDemo">Outer HTML</a>
      <a href="#/challenges/ToggleButton">Toggle Button</a>
      <a href="#/challenges/NotificationAndMenuAndSearch">DashBoard</a>
      <a href="#/challenges/FirstDemo">FirstDemo</a>
      <a href="#/challenges/NavBar">NavBar</a>
      <a href="#/challenges/TableOfContentBasic">TOC 1</a>
      <a href="#/challenges/DebounceDemo">Debounce</a>
      <a href="#/challenges/SignUpForm">SignUpForm</a>
      <a href="#/challenges/PriceTable">PriceTable</a>
      <a href="#/challenges/RoratingImageGallery">Image Gallery</a>
      <a href="#/challenges/StatisticDashBoard">Statistic</a>
      <a href="#/challenges/DailyProgress">Daily Progress</a>
      <a href="#/challenges/SliderRadioButtion">Slider</a>
      <a href="#/challenges/Profile">Profile</a>
    </nav>
    <div class="right-container">
      <component :is="currentView" class="view" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.clip,
.dark-mode {
  .container {
    nav {
      border-right: 1px solid rgb(253, 253, 253);
    }
  }
}

.container {
  display: flex;
  height: 90vh;
  nav {
    flex: 1;
    /* background-color: red; */
    border-right: 1px solid black;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;

    /* 产生滚动 */
    overflow-y: auto; /* 在需要的容器上启用滚动 */

    a {
      /* height: 30px;
      line-height: 30px; */
      text-align: center;
      text-decoration: none;
      border: 1px solid black;
      border-radius: 10px;
      padding: 10px;
      margin: 10px;
      background-color: rgb(16, 164, 137);
      color: aliceblue;
      width: 150px;
      white-space: nowrap;
      overflow-x: hidden;
      text-overflow: ellipsis;

      &:hover {
        background-color: rgb(34, 199, 169);
        box-shadow: 2px 2px 2px rgb(16, 164, 137);
      }
    }
  }
  .right-container {
    position: relative;
    flex: 2;
    padding: 10px;
    .view {
      /* position: absolute;
      right: 20px;
      left: 20px; */
      overflow-y: auto;
    }
  }
}
</style>
